<template>
	<div class="detail-dialog">
		<el-dialog v-model="showDialog" :show-close="false" width="75%" :destroy-on-close="true" :before-close="closeDialog">
			<template #header>
				<div class="my-header">
					<span>
					<h3>{{ title }}</h3>
					</span>
					<span>
					<el-button type="danger"  @click="closeDialog">
						<CircleCloseFilled />
						关闭
					</el-button>
					</span>
				</div>
			</template>
			<div>
				<div class="content">
					<display-search
						ref="DisplaySearchRef"
						class="super-table-display-search"
						v-bind="searchConfig"
						v-model="searchFormData"
						@resetQueryData="handleResetBtnClick"
						@queryData="handleQueryBtnClick"
					/>
					<display-table
						class="detail-dialog-display-table"
						:ref="displayTableRef"
						:showIndexColumn="true" 
						:detailPropList="detailPropList" 
						:detailDataList="detailDataList"
						:header_cell_style="header_cell_style"
						:detailDataConut="detailDataConut"
                        :multipleSelect="multipleSelect"
                        :allSelectedData="allSelectedData"
                        :selectedPropList="selectedPropList"
                        @emitReturnInfo = "emitReturnInfo"
						v-model:page="pageInfo"
					/>
				</div>
			</div>
		</el-dialog>
	</div>
</template>
<script setup>
import { ref,toRefs,computed,watch,getCurrentInstance,onMounted,nextTick,defineExpose, reactive} from "vue";
import DisplayTable from "./DisplayTable.vue";
import DisplaySearch from "./DisplaySearch.vue";
import { View, Document, Printer, CircleCloseFilled, Search,Check, Close } from '@element-plus/icons-vue'
const emit=defineEmits(['emitReturnInfo']);

const props=defineProps({
	searchConfig:{//搜索区域的表单配置
		type:Object,
		require:false,
		default:()=>({})
	},
    multipleSelect:{//多选还是单选
		type:Boolean,
		require:false,
		default:false
	},
    keyword:{
        type:String,
        require:false,
        default:''
    },
    getTableDataFunction:{//数据查询方法
		type:Function,
		require:false,
		default:()=>([])
	},
    detailPropList:{//表格的列以及属性
		type:Array,
		require:true,
		default:[]
	},
    allSelectedData:{//当前已选的数据
		type:Array,
		require:true,
		default:[]
	},
    selectedPropList:{//已选择表格的表格的列信息
		type:Array,
		require:false,
		default:[]
	},
});
//解析props,
const {searchConfig}=toRefs(props);
//当前弹窗左上角标题
const title=ref('选择数据');
const DisplaySearchRef = ref(null);//可修改的
//定义此弹框显示开关
const showDialog = ref(false)
//定义表格实例对象
const displayTableRef = ref(null)
//el-table表头样式
const header_cell_style = {}
const detailDataList = ref([]);//可修改的
const listLoading = ref(false);
const detailDataConut = ref(0);//可修改的
const pageInfo = ref({ currentPage: 1, pageSize: 10 })

//定义一个对象searchFormData，存储的是search的数据
const searchProps = searchConfig?.searchProps ?? []
const formOriginData = {}
for (const item of searchProps) {
	formOriginData[item.field] = ''
}
const searchFormData = ref(formOriginData)

//获取数据接口，接口内容由调用该组件的地方写，必须是返回promise的方法
//点击了清空按钮逻辑
const handleResetBtnClick=()=>{
	//把表单数据清空
	searchFormData.value = formOriginData;
	//改成第一页
	pageInfo.value.currentPage=1
	//重新查询
	getPageData()
};
//点击了查询按钮逻辑
const handleQueryBtnClick=()=>{
	pageInfo.value.currentPage=1
	getPageData()
};

const getPageData = async() =>{
	listLoading.value=true
	const {querysuccess,totalcount,datalist} = await props.getTableDataFunction(pageInfo.value.currentPage,pageInfo.value.pageSize,{...searchFormData.value,...props.fixedCondition})
	if(querysuccess){
		detailDataConut.value = totalcount
		detailDataList.value = datalist
	}
	listLoading.value=false
};
//监听子组件的分页器，如果变化，那么重新查询数据
watch(pageInfo, () => getPageData())
watch(()=>showDialog.value,()=>{
	if(showDialog.value){
		//1遍历一下searchConfig?.value?.searchProps
		let firstQueryParams = {}
		searchConfig?.value?.searchProps?.forEach(item=>{
			if(item.defaultValue){
				firstQueryParams[item.field] = item.defaultValue
			}
		})
		nextTick(()=>{
			DisplaySearchRef.value.subModelValue = {...DisplaySearchRef.value.subModelValue,...props.initSearchData,...firstQueryParams}
			searchFormData.value = {...searchFormData.value,...props.initSearchData,...firstQueryParams}
			getPageData()
		})
	}
})
const closeDialog =()=>{
	//1.关闭弹框
	showDialog.value = false
}
const getTabelWidth = ()=>{
    if(props.multipleSelect){
        return '70%'
    }else{
        return '100%'
    }
}
const emitReturnInfo = (data)=>{
    emit("emitReturnInfo",data)
}
defineExpose({
    showDialog,getPageData
})
</script>
<style scoped>
.super-table-display-search{
	width:100%;
}
.tabletext{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.detail-dialog{
	position: absolute;
}
.detail-dialog-display-table{
    border-top: 1px solid rgb(204, 202, 202);
}
/* 搜索区域的form-item底部外边距改为0 */
.display-search-form :deep() .el-form-item {
    margin-bottom: 18px !important;
}
/* 弹框上部空白缩小*/
.detail-dialog :deep() .el-dialog__body {
	padding: 10px;
}
/* 底部分页器居中*/
.detail-dialog-display-table :deep() .footer{
	height: 50px;
	display: flex;
	justify-content: space-between;
	align-items: center;
    padding: 0 50px;
    border-top: 1px solid rgb(204, 202, 202);
}
/* eldialog顶部样式*/
.my-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.myselect :deep()  .el-cascader__tags .el-tag{
	    max-width: 70%;
	}
</style>